<template>
	<div>
		<cl-crud @load="onLoad">
			<!-- <template #slot-togrant>
				<a
					class="togrant"
					target="_blank"
					href="https://oauth.taobao.com/authorize?response_type=code&client_id=28187829&redirect_uri=http%3A%2F%2Ftools-api.daihuo.com%2Fapi%2Ftool%2Ftaobao%2Fpageauthorizenew%3FuserId%3D12&state=&view=web"
					>去授权</a
				>
			</template>-->
			<template #table-column-sessionStatus="{scope}">
				<el-tag v-if="scope.row.sessionStatus == 0" type="success">失效</el-tag>
				<el-tag v-else>有效</el-tag>
			</template>
			<template #table-column-status="{scope}">
				<el-tag v-if="scope.row.status == 0" type="success">暂停</el-tag>
				<el-tag v-else>开启</el-tag>
			</template>
			<template #table-column-tljStatus="{scope}">
				<el-tag v-if="scope.row.status == 0" type="success">否</el-tag>
				<el-tag v-else>是</el-tag>
			</template>
		</cl-crud>
	</div>
</template>

<script>
import moment from 'moment';

export default {
	data() {
		return {};
	},

	mounted() {},

	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;

			ctx.service(this.$service.systemMenagement.jdApp)
				.set('table', {
					columns: [
						{
							type: 'index',
							label: '序号',
							align: 'center',
							width: '60'
						},
						{
							label: '平台',
							prop: 'app',
							align: 'center',
							width: 150
						},
						{
							label: '联盟ID',
							prop: 'unionId',
							align: 'center',
							width: 150
						},
						{
							label: '应用ID',
							prop: 'appId',
							align: 'center',
							width: 150
						},
						{
							label: 'pid',
							prop: 'pid',
							align: 'center',
							width: 160
						},

						{
							label: 'appkey',
							prop: 'appkey',
							align: 'center'
						},
						{
							label: 'appsecret',
							prop: 'appsecret',
							align: 'center'
						},
						{
							label: 'accessToken',
							prop: 'accessToken',
							align: 'center'
						},
						{
							label: '开启状态',
							prop: 'status',
							align: 'center'
						},
						{
							label: '备注',
							prop: 'remark',
							align: 'center'
						}
					],
					op: {
						layout: ['slot-togrant', 'edit', 'delete']
					}
				})
				.set('upsert', {
					props: {
						labelWidth: '120px',
						center: true,
						width: '600px',
						'custom-class': 'custom-class-dialog-mini'
					},
					items: [
						// {
						// 	label: '淘宝用户ID',
						// 	prop: 'tbUserId',
						// 	component: {
						// 		name: 'el-input',
						// 		attrs: {
						// 			placeholder: '请输入淘宝用户ID'
						// 		}
						// 	}
						// },
						// {
						// 	label: '账号',
						// 	prop: 'account',
						// 	component: {
						// 		name: 'el-input',
						// 		attrs: {
						// 			placeholder: '请输入账号'
						// 		}
						// 	},
						// 	rules: {
						// 		required: true,
						// 		message: '请输入账号'
						// 	}
						// },
						// {
						// 	label: 'sessionKey',
						// 	prop: 'sessionKey',
						// 	component: {
						// 		name: 'el-input',
						// 		attrs: {
						// 			placeholder: '请输入sessionKey'
						// 		}
						// 	}
						// },
						// {
						// 	label: 'refresh_token',
						// 	prop: 'refreshToken',
						// 	component: {
						// 		name: 'el-input',
						// 		attrs: {
						// 			placeholder: '请输入refresh_token'
						// 		}
						// 	}
						// },
						// {
						// 	label: 'session状态',
						// 	prop: 'sessionStatus',
						// 	value: 1,
						// 	component: {
						// 		name: 'el-radio-group',

						// 		options: [
						// 			{
						// 				label: '有效',
						// 				value: 1
						// 			},
						// 			{
						// 				label: '失效',
						// 				value: 0
						// 			}
						// 		]
						// 	}
						// },
						// {
						// 	prop: 'bindingNum',
						// 	label: '绑定数量',
						// 	value: 1,
						// 	component: {
						// 		name: 'el-input-number',
						// 		attrs: {
						// 			'controls-position': 'right'
						// 		},
						// 		props: {
						// 			min: 0
						// 		}
						// 	}
						// },
						// {
						// 	prop: 'expireTime',
						// 	label: '到期时间',
						// 	span: 13,
						// 	value: moment().format('YYYY-MM-DD HH:mm:ss'),
						// 	component: {
						// 		name: 'el-date-picker',
						// 		attrs: {
						// 			// type: 'datetimerange',
						// 			'value-format': 'yyyy-MM-dd HH:mm:ss'
						// 		}
						// 	}
						// },
						// {
						// 	prop: 'refreshTime',
						// 	label: '可刷新时间',
						// 	span: 13,
						// 	value: moment().format('YYYY-MM-DD HH:mm:ss'),
						// 	component: {
						// 		name: 'el-date-picker',
						// 		attrs: {
						// 			// type: 'datetimerange',
						// 			'value-format': 'yyyy-MM-dd HH:mm:ss'
						// 		}
						// 	}
						// },
						// {
						// 	label: '渠道邀请码',
						// 	prop: 'inviterCode',
						// 	component: {
						// 		name: 'el-input',
						// 		attrs: {
						// 			placeholder: '请输入渠道邀请码'
						// 		}
						// 	}
						// },
						{
							label: 'appkey',
							prop: 'appkey',
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入appkey'
								}
							},
							rules: {
								required: true,
								message: '请输入appkey'
							}
						},
						{
							label: 'appsecret',
							prop: 'appsecret',
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入appsecret'
								}
                            },
                            rules: {
								required: true,
								message: '请输入appsecret'
							}
						},
						{
							label: '联盟ID',
							prop: 'unionId',
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入联盟ID'
								}
                            },
                            rules: {
								required: true,
								message: '请输入联盟ID'
							}
						},
						{
							label: 'accessToken',
							prop: 'accessToken',
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入accessToken'
								}
                            },
                            rules: {
								required: true,
								message: '请输入accessToken'
							}
						},
						{
							label: 'pid',
							prop: 'pid',
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入pid'
								}
                            },
                            rules: {
								required: true,
								message: '请输入pid'
							}
						},
						{
							label: '应用ID',
							prop: 'appId',
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入appId'
								}
                            },
                            rules: {
								required: true,
								message: '请输入appId'
							}
						},
						{
							label: '开启状态',
							prop: 'status',
							value: 0,
							component: {
								name: 'el-radio-group',
								options: [
									{
										label: '开启',
										value: 1
									},
									{
										label: '暂停',
										value: 0
									}
								]
							}
						},
						{
							label: '备注',
							prop: 'remark',
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入备注'
								}
							}
						}
					]
				})
				.set('layout', [
					['refresh-btn', 'add-btn', 'flex1', 'search-key'],
					['data-table'],
					['flex1', 'pagination']
				])

				.done();

			app.refresh();
		}
	}
};
</script>
<style lang="scss" scoped>
.togrant {
	margin-right: 1em;
	color: #409eff;
	font-size: 12px;
}
</style>
